{extend name='public/base' /}

{block name="css"}
<style>
    .layui-btn.userbind {
        background-color: #95999c;
        margin-top: 3px;
    }

    .layui-btn.unbind {
        margin-top: 3px;
    }
</style>
{/block}

{block name='content'}

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">微信绑定</div>
                <div class="layui-card-body" pad15>
                    <div class="layui-form" lay-filter="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">微信</label>
                            <div class="layui-input-block">
                                {if $data['wx_openid'] == '' }
                                <button type="button" class="layui-btn layui-btn-sm userbind">未绑定</button>
                                {else /}
                                <button type="button" class="layui-btn layui-btn-sm unbind">已绑定</button>
                                {/if}
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name='js'}
<script>
    layui.use(['layer'], function () {
        let $ = layui.jquery,
            layer = layui.layer;
        $('.userbind').click(function () {
            $.ajax({
                type: 'post',
                url: '/manage/system/myInfo/userBind',
                success: function (res) {
                    if (res.code === 0) {
                        layer.open({
                            type: 1,
                            title: false,
                            closeBtn: false,
                            area: ['300px', '300px'],
                            shade: 0.8,
                            id: 'LAY_Bind',
                            // btnAlign: 'c',
                            moveType: 1,//拖拽模式，0或者1
                            content: '<img src="' + res.data.url + '" style="width: 300px;">',
                            shadeClose: true,
                            // time: 60000,
                            success: function (layero, index) {
                                //定时查询扫码状态
                                var number = 0,
                                    userBind = setInterval(function () {
                                        console.log(number)
                                        number++;
                                        if (number >= 30) {
                                            layer.msg('二维码已超时,请重新扫码！');
                                            clearInterval(userBind);//清除interval定时器
                                            layer.close(index);
                                        }
                                        $.ajax({
                                            type: "post",
                                            url: '/manage/system/myInfo/bindingStatus',
                                            data: {
                                                'id': res.data.id,
                                            },
                                            success: function (res) {
                                                if (res.code !== 0) {
                                                    clearInterval(userBind);
                                                    layer.msg(res.message);
                                                } else {
                                                    if (res.data.status === 1) {
                                                        clearInterval(userBind);
                                                        layer.close(index);
                                                        layer.msg('绑定成功', {icon: 1}, function () {
                                                            location.reload();
                                                        });
                                                    } else if (res.data.status === 2) {
                                                        layer.msg('该微信已绑定其他账号', {icon: 5});
                                                        clearInterval(userBind);
                                                        layer.close(index);
                                                    }
                                                }
                                            }
                                        });
                                    }, 2000);
                                // clearInterval(intervalBox);//清除interval定时器
                            },
                        });
                    } else {
                        layer.msg('请求错误！');
                    }
                }
            });
        });

        $('.unbind').click(function () {
            $.ajax({
                type: "post",
                url: '/manage/system/myInfo/userWxUnbind',
                success: function (data) {
                    // 根据服务端二次验证的结果进行跳转等操作
                    if (data.code !== 0) {
                        layer.msg(data.message, {icon: 5});
                    } else {
                        layer.msg('解除绑定成功', {icon: 1}, function () {
                            location.reload();
                        });
                    }
                }
            });
        })
    });
</script>
{/block}
